<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/5/5
  Time: 16:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!--用jstl算出后台传来的List中元素的个数-->
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!--分页标签 -->
<%@ taglib prefix="page" uri="/xianzhiOA/pageTag" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>模板编辑</title>
    <!-- Basic -->
    <meta charset="UTF-8"/>
    <title>模板</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="${pageContext.request.contextPath}/dist/backEnd/css/bootstrap.min.css"/>
    <link href="${pageContext.request.contextPath}/dist/backEnd/css/style.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/dist/backEnd/css/skycons.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/dist/backEnd/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/dist/backEnd/css/pace.preloader.css" rel="stylesheet"/>
    <script src="${pageContext.request.contextPath}/dist/backEnd/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/dist/backEnd/js/datetime.js"></script>


    <script>
        window.onload = function () {
            var extendTempletList = document.getElementById("extendTempletList").value;
            <%--var extendObjectarray=new Array();--%>
            <%--extendObjectarray.push("${extendObjectList}");--%>

            //修改模板提交时，重新赋跳转到方法
            var templetForm = document.getElementById("templetForm");
            if ("${xzTempletBase.templetBaseId}" != 0) {
//                 document.getElementById("mould_a2").style.display="none";
//                 document.getElementById("templet_a2").style.display="none";

                templetForm.action = "${pageContext.request.contextPath}/XzTempletBase/updateTemplet.emp";
            }
        }
    </script>


    <script>
        var i = 1;
        var j = 1;
        var f = 1;
        function addElement() {
            var templetBaseId = "${xzTempletBase.templetBaseId}";
            if (templetBaseId != null && templetBaseId != "" && templetBaseId != "0") {
                var div = document.createElement('div');
//                var div = document.getElementById("course");
                div.innerHTML = '<div class="form-group col-md-4"> ' +
                    '<span class="new_name">原由 ： </span> ' +
                    '<input type="text" class="new_in" autocomplete="off" name="extendInput' + j + '" value=""> ' +
                    '</div>';
                div.id = 'Elem' + i;
                document.getElementById('course').appendChild(div);
                document.getElementById("extendTypeCount").value = f;
                i++;
                j++;
                f++;
            } else {
                var div = document.createElement('div');
                div.innerHTML = '<div class="form-group col-md-4" id="course"> ' +
                    '<span class="new_name">原由 ： </span> ' +
                    '<input type="text" class="new_in" autocomplete="off" name="extendInput' + j + '" value=""> ' +
                    '</div>';
                div.id = 'Elem' + i;
                document.getElementById('course').appendChild(div);

                document.getElementById("extendTypeCount").value = f;
                i++;
                j++;
                f++;

            }


        }
        function dropElement() {
            var aaa = document.getElementById('Elem' + (i - 1));
            document.getElementById('course').removeChild(aaa);
            i--;
            f--;
            document.getElementById("extendTypeCount").value = (f - 1);
        }


    </script>
    <script>
        var ii = 1;
        var jj = 1;
        var k = 1;
        function addElement2() {
            var div = document.createElement('div');

            div.innerHTML = '<div class="form-group col-md-4"> <select style="width:68%;border: 1px solid #cccccc" name="nodeSelect' + jj + '" id="nodeSelect' + jj + '"><c:forEach items="${roleslist}" var="roles"> ' +
                '<option value="${roles.roleId}">${roles.roleName}</option>' +
                '</c:forEach>' +
                '</select></div>';

            div.id = 'Elem2' + ii;
            document.getElementById('course2').appendChild(div);

            document.getElementById("nodeCount").value = k;
            ii++;
            jj++;
            k++;
        }
        function dropElement2() {
            var bbb = document.getElementById('Elem2' + (ii - 1));
            document.getElementById('course2').removeChild(bbb);
            ii--;
            k--;
            document.getElementById("nodeCount").value = (k - 1);
        }
    </script>
    <script>
        //        添加方法或修改方法
        function save() {
            var array = new Array();  //扩展模板
            var nodearray = new Array();  //节点的数组

            var count = parseInt(document.getElementById("extendTypeCount").value);
            if (count > 0) {
                for (var a = 1; a < count + 1; a++) {
                    var extend = $("input[name='extendInput" + a + "']").val();
                    array.push(extend);
                }
                document.getElementById('extendTempletList').value = array;
            }
            var nodeCount = parseInt(document.getElementById("nodeCount").value);
            if (nodeCount > 0) {
                for (var b = 1; b < nodeCount + 1; b++) {
                    var myselect = document.getElementById("nodeSelect" + b);
                    var index = myselect.selectedIndex;
                    var valueinfo = myselect.options[index].value;
                    nodearray.push(valueinfo);
                }
                document.getElementById("nodeList").value = nodearray;
            }
            var templetForm = document.getElementById("templetForm");
            templetForm.submit();
        }

        //删除一个扩展表中数据的方法
        function deleteOneExtend(templetExtendId) {
            $.ajax({
                url: '${pageContext.request.contextPath}/XzTempletBase/deleteOneExtend.emp',
                data: {id: templetExtendId},
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    location.reload();
                }
            })
        }
        //删除一个节点表中的方法
        function deleteOneNode(approvalprocessId) {
            $.ajax({
                url: '${pageContext.request.contextPath}/XzTempletBase/deleteOneNode.emp',
                data: {id: approvalprocessId},
                type: 'get',
                dataType: 'json',
                success: function (data) {
                    location.reload();
                }
            })
        }

        //返回主页
        function returnMain() {
            window.location.href = "${pageContext.request.contextPath}/XzTempletBase/selTempletAll.emp";
        }
    </script>


</head>
<body>
<!--头部开始-->
<jsp:include page="headerBack.jsp"/>
<!-- 导航 -->
<jsp:include page="leftBack.jsp"/>
<!--内容页-->
<div class="main">

    <!--内容页头部-->
    <div class="page-header">
        <div class="pull-left">
            <ol class="breadcrumb visible-sm visible-md visible-lg">
                <li><a href="index.html"><i class="icon fa fa-home"></i>主页</a></li>
                <li class="active"><i class="fa fa-pencil"></i>模板</li>
            </ol>
        </div>
        <div class="pull-right">
            <h2>主页</h2>
        </div>
    </div>


    <div class="mould">


        <sf:form action="${pageContext.request.contextPath}/XzTempletBase/addTemplet.emp" class="mould_form"
                 id="templetForm" modelAttribute="xzTempletBase" method="post">

        <input type="hidden" value="" id="extendTypeCount">
        <input type="hidden" value="" id="nodeCount"/>


        <div><h4 class="mould_h4">编辑模板</h4></div>
        <sf:input type="hidden" value="" id="extendTempletList" path="extendTypeList"/>
        <sf:input type="hidden" value="" id="nodeList" path="nodeList"/>


        <div class="mould_all col-md-12">
                <%--上面模板--%>
            <div class="form-group col-md-4" style="width:35%">
                <span class="new_name">模板名 ： </span>
                <sf:input type="text" autocomplete="off" path="templetName"/>
                <span style="color: #ba0000"> ${templetNameCheck}
                    <sf:errors path="templetName"/> </span>
                <sf:input type="hidden" path="oleTempletName"/>
                <input type="hidden" name="templetBaseId" value="${xzTempletBase.templetBaseId}"/>
            </div>

            <hr style="width: 100%">

                <%--下面--%>
            <div class="mould_icon">
                    <%--模板属性--%>
                <div>
                    <span> 添加模板的原由属性：</span>
                    <a href="#" class="mould_a1" onclick='addElement()'><span class="fa fa-plus"></span></a>&emsp;
                    <a href="#" id="mould_a2" class="mould_a2" onclick='dropElement()'><span class="fa fa-minus"></span></a>
                    <div style="margin-left: 20px;margin-top: 10px">

                        <c:forEach var="extend" items="${xzTempletBase.extendObjectList}" varStatus="status">
                            <input type="hidden" name="extendObjectList[${status.index}].templetExtendId"
                                   value="${extend.templetExtendId}" class="col-md-4"/>
                            <input type="hidden" name="extendObjectList[${status.index}].templetBaseId"
                                   value="${extend.templetBaseId}"/>
                            <input type="hidden" name="extendObjectList[${status.index}].templetName"
                                   value="${extend.templetName}"/>
                            <input type="text" name="extendObjectList[${status.index}].extendType"
                                   value="${extend.extendType}" id="${extend.templetExtendId}"/>
                            <a onclick="deleteOneExtend(${extend.templetExtendId})" role="button" data-toggle="modal"><i
                                    class="fa fa-times"></i></a>
                        </c:forEach>
                            <%--<div id="course">--%>
                            <%--<div id="newinput_div" style="border: 1px solid pink;height: 50px"></div>--%>
                            <%--</div>--%>
                        <%--<div style="clear: both"></div>--%>
                    </div>
                </div>

                    <%--1添加位置--%>
                <div id="course" class="col-md-12"></div>

                    <%--模板节点--%>
                <div class="templet_icon1" id="templet_icon1" style="margin-top: 50px">
                    <div>
                        <span> 添加模板的审批节点：</span>
                        <a href="#" class="templet_a1" onclick='addElement2()'><span class="fa fa-plus"></span></a>&emsp;
                        <a href="#" id="templet_a2" class="templet_a2" onclick='dropElement2()'><span
                                class="fa fa-minus"></span></a>
                    </div>
                    <div style="margin-left: 20px;margin-top: 10px">
                        <c:forEach var="node" items="${xzTempletBase.nodeObjectList}" varStatus="status">
                            <input type="hidden" name="nodeObjectList[${status.index}].approvalprocessId"
                                   value="${node.approvalprocessId}"/>
                            <input type="hidden" name="nodeObjectList[${status.index}].templetBaseId"
                                   value="${node.templetBaseId}"/>

                            <select id="${node.roleId}" name="nodeObjectList[${status.index}].roleId">
                                <c:forEach items="${roleslist}" var="roles">
                                    <%--<option value="${p.projectId}" <c:if test="${module0.moduleProject == p.projectId}">selected="selected"</c:if>>${p.projectName}</option>--%>
                                    <%--<option value="${roles.roleId}">${roles.roleName}</option>--%>
                                    <option value="${roles.roleId}"
                                            <c:if test="${node.roleId == roles.roleId}">selected="selected"</c:if>>${roles.roleName}</option>
                                </c:forEach>
                            </select>
                            <a onclick="deleteOneNode(${node.approvalprocessId})" role="button" data-toggle="modal"><i
                                    class="fa fa-times"></i></a>
                        </c:forEach>
                    </div>
                </div>

                    <%--2添加位置--%>
                <div id="course2" class="col-md-12"></div>

            </div>


                <div style="margin-top: 50px">
                    <button type="button" onclick="save()" class="btn btn-primary">提交</button>
                    <button type="button" onclick="returnMain()" class="btn btn-primary">返回</button>
                </div>
            </sf:form>


        </div>


    </div>


</div>
</body>
</html>
